<template>
  <div>
    <div class="attr-item-edit-wrapper">
      <p class="attr-item-title">图表尺寸</p>
      <div class="col-2 attr-item-edit-input">
        <el-input-number size="mini"
                          v-model="activeElement.commonStyle.width"
                          controls-position="right" :min="0"/>
        <div class="attr-item-edit-input-des">宽度 (px)</div>
      </div>
      <div class="col-3 attr-item-edit-input">
        <div class="attr-item-edit-input-des">锁定</div>
      </div>
      <div class="col-2 attr-item-edit-input">
        <el-input-number size="mini"
                          v-model="activeElement.commonStyle.height"
                          controls-position="right" :min="0"/>
        <div class="attr-item-edit-input-des">高度 (px)</div>
      </div>
    </div>
    <div class="attr-item-edit-wrapper">
      <p class="attr-item-title">图表位置</p>
      <div class="col-2 attr-item-edit-input">
        <el-input-number size="mini"
                          v-model="activeElement.commonStyle.top"
                          controls-position="right" :min="0"/>
        <!-- <div class="attr-item-edit-input-des">y</div> -->
      </div>
      <div class="col-2 attr-item-edit-input">
        <el-input-number size="mini"
                          v-model="activeElement.commonStyle.left"
                          controls-position="right" :min="0"/>
        <!-- <div class="attr-item-edit-input-des">x</div> -->
      </div>
    </div>
    <div class="attr-item-edit-wrapper">
      <p class="attr-item-title">透明度</p>
      <div class="col-1 attr-item-edit-input">
        <el-slider 
                    @change="throttleAddHistory"
                    v-model="activeElement.commonStyle.opacity"
                    show-input :min="0" :max="1" input-size="mini" :step="0.1"></el-slider>
      </div>
    </div>
	</div>

</template>

<script>
import {mapState, mapGetters} from 'vuex'
	import {throttle} from 'lodash'
	export default {
		name: "attr-qk-lineSimpleForm",
		props: {
      value: {
        type: Object
      }
    },
		components: {
		},
		data() {
			return {

			}
		},

		mounted() {

		},
		created() {
			this.throttleAddHistory = throttle(this.addHistory, 3000)
		},
    computed: {
			...mapState({
			// 	projectData: state => state.editor.projectData,
			// 	activePageUUID: state => state.editor.activePageUUID,
			// 	activeElementUUID: state => state.editor.activeElementUUID,
				activeAttrEditCollapse: state => state.editor.activeAttrEditCollapse
			}),
			...mapGetters([
				// 'currentPageIndex',
				// 'activeElementIndex',
				// 'activeElement',
				// 'activePage'
        'activeElement'
			])
		},
    methods:{
      addHistory() {
				this.$store.dispatch('addHistoryCache')
			},
    }
	}
</script>
<style lang="scss" scoped>
  .sizeAndPosition-wrapper {
    display: flex;
    width: 100%;
  }

  .align-type-item {
    flex: 1;
    cursor: pointer;
    text-align: center;
    &.clearFlex {
      width: 42px;
      flex: none;
    }
    i {
      line-height: 1;
      display: inline-block;
      padding: 6px;
      border-radius: 4px;
      background: rgba(37, 165, 137, 0.08);
    }
    &:hover {
      i {
        color: white;
        background: $primary;
      }
    }
  }

  .attr-item-edit-wrapper {
    padding-left: 18px;
    display: flex;
    width: 100%;
    text-align: center;
    padding-bottom: 10px;
    .attr-item-title {
      text-align: left;
      min-width: 60px;
      font-size: 12px;
    }
    .attr-item-edit-input {
      &.col-2 {
        width: 90px;
        margin-left: 10px;
      }
      &.col-1 {
        width: 250px;
      }
      &.col-3 {
        width: 60px;
        margin-left: 10px;
      }
      &.col-4 {
        width: 50px;
        margin-left: 10px;
      }
      .attr-item-edit-input-des {
        text-align: center;
        line-height: 1;
        margin-top: 2px;
        font-size: 12px;
        color: $gray;
      }
    }
  }
</style>
<style lang="scss">
  .attr-item-edit-wrapper {
    .el-input-number.is-controls-right .el-input__inner {
      padding-left: 2px;
      padding-right: 32px;
      width: 90px;
    }
    .el-input-number--mini {
      width: 90px;
    }
    .el-slider__runway.show-input {
      margin-right: 108px;
    }
  }
</style>